<style type="text/less" lang="less">
    @import url('index.less');
</style>

<template>
    <div class="login-box">
        <el-form ref="form" :model="form">
            <el-form-item>
                <!--<img :src="`${baseUrl}img/login_logo.png`">-->
            </el-form-item>
            <el-form-item>
                <div class="welcome">欢迎登录！</div>
            </el-form-item>
            <el-form-item class="input-box">
                <el-input v-model="form.account" placeholder="账号" @keyup.enter.native="login" autofocus>
                    <template slot="prepend"><i class="iconfont icon-user"></i></template>
                </el-input>
            </el-form-item>
            <el-form-item class="input-box">
                <el-input type="password" v-model="form.password" placeholder="密码" @keyup.enter.native="login">
                    <template slot="prepend"><i class="iconfont icon-mima"></i></template>
                </el-input>
            </el-form-item>
            <el-form-item style="margin-bottom: 0">
                <el-button type="primary" @click="login" style="width: 100%;">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "login",
        data() {
            return {
                baseUrl: process.env.BASE_URL,
                form: {
                    account: '',
                    password: ''
                }
            };
        },
        methods: {
            login() {
                if (this.form.account === '' || this.form.password === '') {
                    this.$message.warning('账号密码不能为空');
                    return;
                }

                this.$store.dispatch('ajax', {url: 'api/login', method: 'post', data: this.form, succeed: (res) => {
                        sessionStorage.token = res.token;
                        this.$router.push({path: '/'})
                    }
                });
            }
        }
    }
</script>